import React from 'react'
import { connect } from 'react-redux'
import { createAc1, createAc2, createAc3 } from '../store/actions'

class Item extends React.Component {
  render() {
    const { num, pname, add, sub } = this.props
    return (
      <div>
        <button onClick={() => add()}>+</button>
        <button onClick={() => sub()}>-</button>
        <span>【{pname}】商品的数量【{num}】</span>
      </div>
    )
  }
}
// 把state->props
// props形参是旧的props
const mapStateToProps = (state, props) => {
  // console.log(state);
  // console.log(props);
  // 查看Cart.js
  const { pname } = props
  const num = state[pname]
  return {
    num,
    pname
  }
}
// 把diapatch变成props
const mapDispatchToProps = (dispatch, props) => {
  const { pname } = props
  return {
    add: () => {
      dispatch(createAc3(pname))
    },
    sub: () => {
      dispatch(createAc2(pname))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Item)
